<script setup>
import {PerfectScrollbar} from 'vue3-perfect-scrollbar'
import {VForm} from 'vuetify/components/VForm'
import {defineEmits, ref} from "vue";
import {useApi} from "@/composables/useApi.js";
import showTost from "@/components/toast/index.js";

const props = defineProps({
  isDrawerOpen: {
    type: Boolean,
    required: true,
  },
  detailData: {
    type: Object,
    required: true
  },
  teacherList: {
    type: Object,
    required: true
  },
  title: {
    type: String,
    default: '详情'
  },
})

const emit = defineEmits(['update:isDrawerOpen', 'onHandleEdit', 'onHandleDelete'])

const handleDrawerModelValueUpdate = val => {
  emit('update:isDrawerOpen', val)
}

const refVForm = ref()
const resetForm = () => {


  emit('update:isDrawerOpen', false)
}

const closeNavigationDrawer = () => {
  emit('update:isDrawerOpen', false)
  nextTick(() => {
    refVForm.value?.reset()
    refVForm.value?.resetValidation()
  })
}
const form = ref({})
const assignmentData = () => {
  console.log(props.detailData)
  form.value = JSON.parse(JSON.stringify(props.detailData))
}

watch(() => props.isDrawerOpen, () => {
  assignmentData()
})
const isEdit = ref(false)
const onHandleEditData = async () => {
  if (isEdit.value === true) {

    const {data} = await useApi('/admin/Api.Teacher/add').post({...form.value})
    if (data.value.status == 200) {
      emit('onHandleEdit')
      showTost("修改成功", {duration: 3000, type: "success"})
      emit('update:isDrawerOpen', false)
      isEdit.value = false
    }
  } else {
    isEdit.value = true
  }
}
const required = (value, name) => !!value || `${name}为必填字段`;
const onDelete = () => {
  emit('onHandleDelete',form.value)
}
</script>

<template>
  <VNavigationDrawer
    :model-value="props.isDrawerOpen"
    temporary
    location="end"
    width="370"
    @update:model-value="handleDrawerModelValueUpdate"
  >
    <!-- 👉 Header -->
    <AppDrawerHeaderSection
      :title="title"
      @cancel="closeNavigationDrawer"
    />
    <VDivider/>

    <VCard flat>
      <PerfectScrollbar
        :options="{ wheelPropagation: false }"
        class="h-100"
      >
        <VCardText style="block-size: calc(100dvh - 5rem);display: flex;flex-direction: column;">
          <VForm
            :disabled="!isEdit"
            ref="refVForm"
            @submit.prevent=""
            class="d-flex flex-wrap justify-between"
          >
            <VRow>
              <VCol>
                <div class="text-body-1 font-weight-medium text-high-emphasis">
                  基本信息
                </div>
              </VCol>

              <VCol cols="12">
                <VTextField
                  v-model="form.title"
                  label="年级名称"
                  :rules="[(val)=>required(val,'年级名称')]"
                  placeholder="请输入年级名称"
                />
              </VCol>

              <VCol cols="12">
                <VSelect
                  v-model="form.teacher_name"
                  :items="props.teacherList"
                  item-title="real_name"
                  item-value="teacher_id"
                  placeholder="请选择年级主任"
                  :rules="[(val)=>required(val,'年级主任')]"
                  label="年级主任"
                  class="input-width-height"
                />
              </VCol>
<!--              <VCol cols="12">-->
<!--                <VTextField-->
<!--                  v-model="form.graduate_school"-->
<!--                  label="班级数量"-->
<!--                  :rules="[(val)=>required(val,'班级数量')]"-->
<!--                  placeholder="请输入班级数量"-->
<!--                />-->
<!--              </VCol>-->
<!--              <VCol cols="12">-->
<!--                <VTextField-->
<!--                  v-model="form.graduate_school"-->
<!--                  label="学生人数"-->
<!--                  :rules="[(val)=>required(val,'学生人数')]"-->
<!--                  placeholder="请输入学生人数"-->
<!--                />-->
<!--              </VCol>-->

            </VRow>

          </VForm>
            <div style="margin-top:auto;" class="d-flex justify-end ">
              <VBtn
                color="primary"
                class="me-4"
                @click="onHandleEditData"
              >
                {{ isEdit == true ? '保存' : '编辑'}}
              </VBtn>
              <VBtn
                color="error"
                variant="outlined"
                @click="onDelete"
              >
                删除
              </VBtn>
            </div>
        </VCardText>
      </PerfectScrollbar>
    </VCard>
  </VNavigationDrawer>
</template>

<style lang="scss">
.v-navigation-drawer__content {
  overflow-y: hidden !important;
}
</style>
